import styles from './index.module.scss'
import {NavBar, TextArea} from 'antd-mobile'
import {useState} from "react";

export default function CommentInput({name, onClose, onAddComment}) {
  const [value, setValue] = useState('');
  return (
    <div className={styles.root}>
      <NavBar
        right={<span onClick={() => onAddComment(value)} className="publish">发表</span>}
        onBack={onClose}
      >
        {name ? '回复评论' : '评论文章'}
      </NavBar>
      <div className="input-area">
        {/* 回复别人的评论时显示：@某某 */}
        {name && <div className="at">@{name}:</div>}

        {/* 评论内容输入框 */}
        <TextArea onChange={setValue} value={value} placeholder="说点什么~" rows={10}/>
      </div>
    </div>
  )
}
